﻿/// <reference path="../../vipgames.api.js" />


(function () {
    var mygame = { _scores: 0, _level: 0 };

    // local reference to the API object
    var vgApi = null;

    var scoresElement = null;
    var gameStateElement = null;

    var delegate = function (func, _this) {
        return function () { func.apply(_this, arguments); };
    };

    var drawState = function (state) {
        gameStateElement.innerHTML = state;
    }

    mygame.load = function () {
        // get a reference to scene HTML element.
        var scene = vgApi.getScene();

        scene.style.width = "320px";
        scene.style.height = "480px";

        // this fuction draws the interface
        (function () {

            (function () {
                var linksContainer = document.createElement("div");
                linksContainer.setAttribute('style', 'position: relative; top: 0; left: 0; right: 150px');
                scene.appendChild(linksContainer);

                var createLink = function (text, handler) {

                    var link = document.createElement("a");
                    link.addEventListener('click', handler, false);
                    link.setAttribute('href', 'javascript:;');
                    link.appendChild(document.createTextNode(text));
                    link.setAttribute('style', 'display: block; padding: 2px 5px; margin: 10px 5px; border: solid 1px silver');
                    linksContainer.appendChild(link);

                };

                createLink("1. Start the game", delegate(mygame.start, mygame));
                createLink("2. Start a level", delegate(mygame.nextLevel, mygame));
                createLink("3. Score", delegate(mygame.score, mygame));
                createLink("4. End a level", delegate(mygame.endLevel, mygame));
                createLink("5. End the game", delegate(mygame.end, mygame));
            })();

            scoresElement = scene.appendChild((function () {
                var scores = document.createElement("div");
                scores.setAttribute('style', 'background-color: silver; font-size: 18pt; padding: 10px; margin-bottom: 10px; border-radius: 10px');
                scores.innerHTML = "Scores: 0";
                scene.appendChild(scores);
                return scores;
            })());

            gameStateElement = scene.appendChild((function () {
                var state = document.createElement("div");
                state.setAttribute('style', 'background-color: silver; font-size: 18pt; padding: 10px; border-radius: 10px');
                state.innerHTML = "Loading...";
                scene.appendChild(state);
                return state;
            })());
        })();

        //3. pass gameHandler to the API and notify it that the game is now loaded
        var gameHandler = {
            getScores: function () { return mygame.getScores(); },
            stop: function () { mygame.end(); },
            unload: function () { scene.innerHTML = ""; }
        };
        vgApi.game_load(gameHandler);

        drawState('Game Loaded<br/>Displaying Welcome Screen');
    };

    // starts the game
    mygame.start = function () {
        //4. User started the game,  call API: game_start()
        vgApi.game_start();

        mygame.setScores(0);
        mygame._level = 0;
        drawState('Game Started!');
    };

    // goes to next level
    mygame.nextLevel = function () {
        // API: level_start()
        vgApi.level_start({ level: ++mygame._level });

        drawState('Level ' + mygame._level + ' Started!');
    };

    // ends the current level
    mygame.endLevel = function () {
        // API: level_end()
        vgApi.level_end({ level: mygame._level });

        drawState('Level ' + mygame._level + ' Ended');
    };

    // finishes the game
    mygame.end = function () {
        //5. Game finished, call API: game_end()
        vgApi.game_end({ level: mygame._level });

        drawState('Game Ended');
    };

    // adds scores
    mygame.score = function () {
        this.setScores(this._scores + 10);
    };

    // set accessor for _scores
    mygame.setScores = function (scores) {
        this._scores = scores;
        scoresElement.innerHTML = "Scores: " + scores;
    };

    // get accessor for _scores
    mygame.getScores = function () {
        return this._scores;
    };


    // 1. register loadHandeler object
    var loadHandler = {
        game_id: 'my_game',
        load: function (api) {
            //2. VIPgames call this loadHandler.load() function to load the game.
            vgApi = api; // cache the API object
            mygame.load();
        }
    };
    window.vipgames.api.register(loadHandler);
})();